<template>
  <div class="console-system">
    <!-- 顶部导航栏 -->
    <header class="console-header">
      <div class="header-left">
        <div class="system-logo">
          <img src="/v2_soxp5q.png" alt="Mindray" class="logo-icon">
          <span class="system-title">控制台</span>
        </div>
      </div>
      
      <div class="header-right">
        <!-- 搜索框 -->
        <div class="search-box">
          <el-input
            v-model="globalSearchKeyword"
            placeholder="搜索工单、用户..."
            prefix-icon="Search"
            size="default"
            style="width: 300px;"
            @keyup.enter="handleGlobalSearch"
          />
        </div>
        
        <!-- 消息通知 -->
        <el-badge :value="notificationCount" class="notification-badge">
          <el-button :icon="Bell" circle size="default" @click="showNotifications" />
        </el-badge>
        
        <!-- 用户头像下拉菜单 -->
        <el-dropdown @command="handleUserCommand" class="user-dropdown">
          <div class="user-avatar">
            <el-avatar :size="32" :src="currentUser?.avatar">
              {{ currentUser?.realName?.charAt(0) || currentUser?.username?.charAt(0) }}
            </el-avatar>
            <span class="user-name">{{ currentUser?.realName || currentUser?.username }}</span>
            <el-icon><ArrowDown /></el-icon>
          </div>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="profile">个人设置</el-dropdown-item>
              <el-dropdown-item command="back-home">返回主页</el-dropdown-item>
              <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </header>

    <!-- 主体内容区域 -->
    <div class="console-main">
      <!-- 左侧导航栏 -->
      <aside class="sidebar">
        <nav class="sidebar-nav">
          <div class="nav-section">
            <h3 class="nav-section-title">核心功能</h3>
            <ul class="nav-menu">
              <li 
                class="nav-item"
                :class="{ active: activeModule === 'tickets' }"
                @click="switchModule('tickets')"
              >
                <el-icon><Tickets /></el-icon>
                <span>工单管理</span>
                <el-badge :value="pendingTicketsCount" :hidden="pendingTicketsCount === 0" />
              </li>
              <li 
                class="nav-item"
                :class="{ active: activeModule === 'statistics' }"
                @click="switchModule('statistics')"
              >
                <el-icon><DataAnalysis /></el-icon>
                <span>统计分析</span>
              </li>
            </ul>
          </div>
          
          <div class="nav-section">
            <h3 class="nav-section-title">系统管理</h3>
            <ul class="nav-menu">
              <li 
                class="nav-item"
                :class="{ active: activeModule === 'permissions' }"
                @click="switchModule('permissions')"
              >
                <el-icon><Lock /></el-icon>
                <span>权限管理</span>
              </li>
              <li 
                class="nav-item"
                :class="{ active: activeModule === 'logs' }"
                @click="switchModule('logs')"
              >
                <el-icon><Document /></el-icon>
                <span>日志管理</span>
              </li>
            </ul>
          </div>
        </nav>
      </aside>

      <!-- 右侧主内容区 -->
      <main class="content-area">
        <!-- 工单管理模块 -->
        <TicketManagement v-if="activeModule === 'tickets'" />
        
        <!-- 统计分析模块 -->
        <StatisticsAnalysis v-if="activeModule === 'statistics'" />
        
        <!-- 权限管理模块 -->
        <PermissionControl v-if="activeModule === 'permissions'" />
        
        <!-- 日志管理模块 -->
        <LogManagement v-if="activeModule === 'logs'" />
      </main>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Search, 
  Bell, 
  ArrowDown, 
  Tickets, 
  DataAnalysis, 
  Lock, 
  Document 
} from '@element-plus/icons-vue'

// 导入子组件
import TicketManagement from '@/components/console/TicketManagement.vue'
import StatisticsAnalysis from '@/components/console/StatisticsAnalysis.vue'
import PermissionControl from '@/components/console/PermissionControl.vue'
import LogManagement from '@/components/console/LogManagement.vue'

console.log('Console页面组件加载')

const router = useRouter()

// 响应式数据
const activeModule = ref('tickets') // 当前激活的模块
const globalSearchKeyword = ref('') // 全局搜索关键词
const notificationCount = ref(5) // 通知数量
const pendingTicketsCount = ref(5) // 待处理工单数量

// 当前用户信息（从localStorage或store获取）
const currentUser = ref({
  username: 'admin',
  realName: '系统管理员',
  avatar: ''
})

// 页面初始化
onMounted(() => {
  console.log('Console页面初始化')
  
  // 从localStorage获取用户信息
  const userInfo = localStorage.getItem('userInfo')
  if (userInfo) {
    try {
      currentUser.value = JSON.parse(userInfo)
    } catch (error) {
      console.error('解析用户信息失败:', error)
    }
  }
  
  // 检查用户权限
  checkUserPermissions()
})

// 切换模块
const switchModule = (module) => {
  console.log('切换到模块:', module)
  activeModule.value = module
}

// 全局搜索
const handleGlobalSearch = () => {
  console.log('全局搜索:', globalSearchKeyword.value)
  if (!globalSearchKeyword.value.trim()) {
    ElMessage.warning('请输入搜索关键词')
    return
  }
  
  ElMessage.info(`搜索功能开发中: ${globalSearchKeyword.value}`)
}

// 显示通知
const showNotifications = () => {
  console.log('显示通知')
  ElMessage.info('通知功能开发中')
}

// 用户菜单命令处理
const handleUserCommand = async (command) => {
  console.log('用户菜单命令:', command)
  
  switch (command) {
    case 'profile':
      ElMessage.info('个人设置功能开发中')
      break
    case 'back-home':
      router.push('/')
      break
    case 'logout':
      try {
        const confirmed = await ElMessageBox.confirm(
          '确定要退出登录吗？',
          '退出确认',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        
        if (confirmed) {
          // 清除用户信息
          localStorage.removeItem('token')
          localStorage.removeItem('userInfo')
          
          ElMessage.success('退出登录成功')
          router.push('/')
        }
      } catch (error) {
        console.log('用户取消退出')
      }
      break
  }
}

// 检查用户权限
const checkUserPermissions = () => {
  console.log('检查用户权限')
  
  const token = localStorage.getItem('token')
  if (!token) {
    ElMessage.error('未登录，请先登录')
    router.push('/')
    return
  }
  
  // 这里可以添加更多权限检查逻辑
  console.log('用户权限检查通过')
}
</script>

<style scoped>
.console-system {
  width: 100vw;
  height: 100vh;
  background: #f5f7fa;
  display: flex;
  flex-direction: column;
  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
}

/* 顶部导航栏 */
.console-header {
  height: 90px;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
}

.system-logo {
  display: flex;
  align-items: center;
  gap: 17px;
}

.logo-icon {
  height: 70px;
  width: auto;
}

.system-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.search-box {
  display: flex;
  align-items: center;
}

.notification-badge {
  cursor: pointer;
}

.user-dropdown {
  cursor: pointer;
}

.user-avatar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.user-avatar:hover {
  background: #f3f4f6;
}

.user-name {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

/* 主体内容区域 */
.console-main {
  flex: 1;
  display: flex;
  overflow: hidden;
}

/* 左侧导航栏 */
.sidebar {
  width: 240px;
  background: #ffffff;
  border-right: 1px solid #e5e7eb;
  overflow-y: auto;
}

.sidebar-nav {
  padding: 24px 0;
}

.nav-section {
  margin-bottom: 32px;
}

.nav-section-title {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 12px 24px;
}

.nav-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #6b7280;
  font-size: 14px;
  position: relative;
}

.nav-item:hover {
  background: #f3f4f6;
  color: #374151;
}

.nav-item.active {
  background: #eff6ff;
  color: #2563eb;
  font-weight: 500;
}

.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #2563eb;
}

.nav-item .el-icon {
  font-size: 18px;
}

/* 右侧主内容区 */
.content-area {
  flex: 1;
  background: #f9fafb;
  overflow-y: auto;
  padding: 24px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .console-header {
    padding: 0 16px;
  }
  
  .header-right {
    gap: 12px;
  }
  
  .search-box {
    display: none;
  }
  
  .sidebar {
    width: 200px;
  }
  
  .nav-item {
    padding: 10px 16px;
    font-size: 13px;
  }
  
  .content-area {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .sidebar {
    position: fixed;
    left: -240px;
    top: 60px;
    height: calc(100vh - 60px);
    z-index: 50;
    transition: left 0.3s ease;
  }
  
  .sidebar.open {
    left: 0;
  }
  
  .content-area {
    padding: 12px;
  }
}

/* 深色主题适配 */
@media (prefers-color-scheme: dark) {
  .console-system {
    background: #111827;
  }
  
  .console-header {
    background: #1f2937;
    border-bottom-color: #374151;
  }
  
  .system-title {
    color: #f9fafb;
  }
  
  .sidebar {
    background: #1f2937;
    border-right-color: #374151;
  }
  
  .nav-section-title {
    color: #9ca3af;
  }
  
  .nav-item {
    color: #9ca3af;
  }
  
  .nav-item:hover {
    background: #374151;
    color: #f3f4f6;
  }
  
  .nav-item.active {
    background: #1e40af;
    color: #ffffff;
  }
  
  .content-area {
    background: #111827;
  }
}
</style>
